<template>
  <div class="business-item-edit display-flex w-full h-full" style="overflow:hidden;">
    <div class="h-full flex-1 item-list-box display-flex-column" style="overflow: auto">
      <div class="item-list display-flex" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">3.0业务名称:</div>
        <div class="h-full flex-1"></div>
        <div class="item-list-content">
          <a-select
            show-search
            v-model="selectInvBusiness"
            class="selector-item"
            @select="handlerInvSelected"
            style="width: 500px">
            <a-select-option v-for="item in invBusinessList" :key="item.id" :value="item.id">
              {{ item.item_name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="item-list display-flex" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">3.0事项编码:</div>
        <div class="h-full flex-1"></div>
        <div class="item-list-content">
          <a-input style="width: 500px" v-model="itemCode" :disabled="true"/>
        </div>
      </div>

      <div class="item-list display-flex" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">规划许可业务名:</div>
        <div class="h-full flex-1"></div>
        <div class="item-list-content">
          <a-select
            show-search
            v-model="selectMyBusiness"
            class="selector-item"
            @select="handleBizSelected"
            style="width: 500px">
            <a-select-option v-for="item in myBusinessList" :key="item.id" :value="item.id">
              {{ `${item.name}  (${item.nick})` }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="item-list display-flex-column" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">业务流程:</div>
        <div class="item-list-content m-t-sm">
          <a-checkbox-group
            v-model="selectFlowList"
            :options="flowList"
            @change="handlerFlowChange"
          />
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import dapProjectService from '@/api/dapProjectService'
import businessService from '@/api/businessService'
import projectService from '@/api/projectService'

export default {
  name: 'BusinessItemEditDialog',
  props: {
    source: {
      type: String,
      default: () => {
        return ''
      }
    },
    sourceId: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data () {
    return {
      invBusinessList: [],
      selectInvBusiness: undefined,
      selectInvBusinessObj: {},
      myBusinessList: [],
      selectMyBusiness: undefined,
      selectMyBusinessObj: {},
      itemCode: '',
      flowList: [],
      selectFlowList: []
    }
  },
  async mounted () {
    await Promise.all([this.getAllInvestmentList(),
      this.getAllBusiness()])
    if (this.sourceId) {
      this.initSource()
    }
  },
  methods: {
    async initSource () {
      const data = await dapProjectService.getBusinessItemMapById({ businessItemMapId: this.sourceId })
      this.selectInvBusiness = data.itemId
      this.handlerInvSelected(data.itemId)
      this.selectMyBusiness = data.businessId
      await this.handleBizSelected(data.businessId)
      this.selectFlowList = (data.businessFlowId || '').split(',')
      this.$forceUpdate()
    },
    getSaveData () {
      const data = {
        businessFlowId: this.selectFlowList.join(','),
        businessId: this.selectMyBusinessObj.id,
        businessName: this.selectMyBusinessObj.name,
        itemId: this.selectInvBusinessObj.id,
        itemSource: '01',
        item_code: this.selectInvBusinessObj.item_code,
        item_name: this.selectInvBusinessObj.item_name,
        source: this.source
      }
      if (this.sourceId) {
        data.id = this.sourceId
      }
      return data
    },
    handlerFlowChange (list) {
    },
    async handleBizSelected (key) {
      const find = this._.find(this.myBusinessList, item => item.id === key)
      this.selectMyBusinessObj = find
      const list = await projectService.treeBusinessFlowByBusinessId(find.id)
      list.forEach(item => {
        item.label = item.name
        item.value = item.id
      })
      this.flowList = list
      this.selectFlowList = []
    },
    async getAllBusiness () {
      const data = await businessService.getListBusinessAll()
      this.myBusinessList = data
    },
    handlerInvSelected (key) {
      const find = this._.find(this.invBusinessList, item => item.id === key)
      this.itemCode = find.item_code
      this.selectInvBusinessObj = find
    },
    async getAllInvestmentList () {
      const data = await dapProjectService.getAllInvestmentList({ source: this.source })
      this.invBusinessList = data
    }
  }
}
</script>

<style scoped lang="less">
.business-item-edit {
  padding: 20px;

  .item-list {
    margin-bottom: 10px;
  }
}

</style>
